import { createSSRApp, toRaw } from 'vue'
import App from './App.vue'
import { createPinia, PiniaPluginContext } from 'pinia' // pinia状态管理库 替换vuex
import { initRouteIntercept } from '@/utils/intercept' // 页面跳转拦截 类似于router守卫
import { setStorage, getStorage } from '@/utils/common'
import './assets/base.scss'
import './assets/common.scss'
import './static/iconfont.css' // 引入矢量icon
import './static/iconfont-weapp-icon.css' // 引入多彩icon

// pinia 解决页面刷新数据丢失的问题
const piniaPlugin = (context: PiniaPluginContext) => {
  const { store } = context
  // $subscribe state值发生变化时会执行传入的回调
  store.$subscribe(() => {
    // 每次修改值的时候更新localStorage数据
    setStorage(`pinia-${store.$id}`, toRaw(store.$state))
  })
  // 每次构建项目的时候从本地存储取值
  const data = getStorage(`pinia-${store.$id}`)
  // 并将取的值赋给state
  return {
    ...data
  }
}
// 全局注入下拉刷新上滑加载的Mixin，如果使用原生上拉下滑请删除 /uni_modules/mescroll-uni
import Mixin from './uni_modules/mescroll-uni/components/mescroll-uni/mixins/mescroll-comp'
export function createApp() {
  const app = createSSRApp(App)
  const store = createPinia()
  store.use(piniaPlugin)
  app.use(store).use(initRouteIntercept).mixin(Mixin)
  return {
    app
  }
}
